<template>
  <div class="InfiniteScroll">
    <div class="title">
      <div class="qx">区县</div>
      <div class="jsbp">警示标牌</div>
      <div class="czfjsl">出租房间数量</div>
    </div>
    <div class="scroll_parent_box" @mouseenter="mEnter" @mouseleave="mLeave">
      <div
        class="scroll_list"
        :style="{ transform: `translate(0px,-${scrollTop}px)` }"
      >
        <div ref="scrollItemBox">
          <div
            class="scroll_item"
            v-for="(item, index) in listData"
            :key="index"
          >
            <!-- {{ item.title }} -->
            <div class="i-qx">{{ item.qx }}</div>
            <div class="i-jsbp">{{ item.jsbp }}个</div>
            <div class="i-czfjsl">{{ item.czfjsl }}个</div>
          </div>
        </div>
        <div v-html="copyHtml"></div>
      </div>
    </div>
  </div>
</template>

<script>
let timer = null
export default {
  name: 'InfiniteScroll',
  data() {
    return {
      scrollTop: 0, //列表滚动高度
      speed: 20, //滚动的速度
      listData: [
        {
          qx: '东城区',
          jsbp: '3',
          czfjsl: '4',
        },
        {
          qx: '西城区',
          jsbp: '3',
          czfjsl: '4',
        },
        {
          qx: '朝阳区',
          jsbp: '3',
          czfjsl: '4',
        },
        {
          qx: '丰台区',
          jsbp: '3',
          czfjsl: '4',
        },
        {
          qx: '石景山区',
          jsbp: '3',
          czfjsl: '4',
        },
        {
          qx: '海淀区',
          jsbp: '3',
          czfjsl: '4',
        },
        {
          qx: '门头沟区',
          jsbp: '3',
          czfjsl: '4',
        },
        {
          qx: '房山区',
          jsbp: '3',
          czfjsl: '4',
        },
        {
          qx: '通州区',
          jsbp: '3',
          czfjsl: '4',
        },
        {
          qx: '顺义区',
          jsbp: '3',
          czfjsl: '4',
        },
        {
          qx: '昌平区',
          jsbp: '3',
          czfjsl: '4',
        },
        {
          qx: '大兴区',
          jsbp: '3',
          czfjsl: '4',
        },
      ],
      copyHtml: '', //复制多一份防止滚动到后面出现空白
    }
  },
  mounted() {
    // 如果列表数据是异步获取的，记得初始化在获取数据后再调用
    this.initScroll()
  },
  methods: {
    initScroll() {
      this.$nextTick(() => {
        this.copyHtml = this.$refs.scrollItemBox.innerHTML
        this.startScroll()
      })
    },
    // 鼠标移入停止滚动
    mEnter() {
      clearInterval(timer)
    },
    // 鼠标移出继续滚动
    mLeave() {
      this.startScroll()
    },
    // 开始滚动
    startScroll() {
      timer = setInterval(this.scroll, this.speed)
    },
    // 滚动处理方法
    scroll() {
      this.scrollTop++
      // 获取需要滚动的盒子的高度
      let scrollItemBox = this.$refs.scrollItemBox.offsetHeight
      // 当判断滚动的高度大于等于盒子高度时，从头开始滚动
      if (this.scrollTop >= scrollItemBox) {
        this.scrollTop = 0
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.InfiniteScroll {
  box-sizing: border-box;
  /* padding: 50px; */
  // border: 1px solid red;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.title {
  // border: 1px solid red;
  height: 15%;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: space-between;
  font-size: 1.5rem;
  .qx {
    width: 31%;
    // border: 1px solid yellow;
  }
  .jsbp {
    width: 31%;
    // border: 1px solid yellow;
    color: #01ffdf;
  }
  .czfjsl {
    width: 31%;
    // border: 1px solid yellow;
    color: #cec924;
  }
}

.scroll_parent_box {
  // border: 1px solid red;
  height: 80%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  // border: 1px solid #ebeef5;
  overflow: hidden;
  box-sizing: border-box;
  // padding: 0 10px;
}

.scroll_list {
  transition: all 0ms ease-in 0s;
}

.scroll_item {
  width: 100%;
  height: 30%;
  border: 2px solid #0e4772;
  display: flex;
  justify-content: space-between;
  background-color: #0d2a45;
  text-align: center;
  line-height: 500%;
  cursor: pointer;
  &:hover {
    background-color: #063570;
  }
  .i-qx {
    width: 31%;
    // border: 1px solid red;
    // background-color: #0d2a45;
  }
  .i-jsbp {
    width: 31%;
    // border: 1px solid red;
    background-image: url('@/assets/bigScreen/ctnum-bgimg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #01ffdf;
  }
  .i-czfjsl {
    width: 31%;
    // border: 1px solid red;
    background-image: url('@/assets/bigScreen/ctnum-bgimg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #cec924
  }
}
</style>
